<template>
  <div class="container">
    <VerticalLayout>
      <!-- 插入搜索组件 -->
      <template #search>
        <el-space alignment="center">
          <DynamicQueryForm
            :show-match-range="true"
            :extra-fields="extraField"
            :columns-values="columnsValues"
            @submit="onSubmit"
          />
        </el-space>
      </template>

      <!-- 插入表格组件 -->
      <template #table>
        <CustomTable
          ref="customTableRef"
          :actions="listProduct"
          :columns="columns"
          show-selection
          show-pagination
          @selection-change="onSelectionChange"
        >
          <!-- 左边功能 -->
          <template #action-left>
            <el-button type="primary" :icon="Plus" @click="onAddGoods">新增商品</el-button>

            <el-button type="primary" :icon="Plus" @click="onCreatePackage">新增套餐</el-button>
          </template>

          <!-- 右边功能 -->
          <template #action-right>
            <!-- <el-button :icon="Refresh" circle /> -->
          </template>

          <!-- 套餐商品 -->
          <template #productSlot="{ row }">
            <RowGoodsSlots :row="row" name="product" />
          </template>

          <!-- 套餐规格 -->
          <template #productUnitNumSlot="{ row }">
            <RowGoodsSlots :row="row" name="productUnitNum" />
          </template>

          <!-- 套餐图片 -->
          <template #productImageSlot="{ row }">
            <RowGoodsSlots :row="row" name="productImage" />
          </template>

          <!-- 价格 -->
          <template #priceSlot="{ row }">
            <RowGoodsSlots :row="row" name="price" />
          </template>

          <!-- 操作 -->
          <template #operationSlot="{ row }">
            <el-space size="small" wrap alignment="normal">
              <el-button type="primary" :icon="Edit" text size="small" @click="onEdit(row)"
                >编辑</el-button
              >

              <template v-if="row.externalType == 0">
                <el-button
                  :icon="ShoppingCartFull"
                  text
                  type="success"
                  size="small"
                  @click="onStockAdjust(row)"
                  >库存补充</el-button
                >

                <el-button :icon="Memo" text type="info" size="small" @click="onStockRecord(row)"
                  >库存明细</el-button
                >
              </template>

              <el-button :icon="DeleteFilled" text type="danger" size="small" @click="onDelete(row)"
                >删除</el-button
              >
            </el-space>
          </template>
        </CustomTable>
      </template>
    </VerticalLayout>

    <!-- 筛选弹窗 -->
    <FilterTable ref="filterTableRef" />
    <!-- 创建商品 -->
    <AddGoods :goodsType="goodsType" ref="addGoodsRef" @ok="customTableRef?.refresh" />
    <!-- 创建套餐 -->
    <CreatePackage
      :goodsList="goodsList"
      :goodsTypes="goodsType"
      @ok="customTableRef?.refresh"
      ref="createPackageRef"
    />
    <!-- 补充库存 -->
    <StockAdjustDialog ref="stockAdjustDialogRef" @ok="customTableRef?.refresh" />
    <!-- 库存明细 -->
    <StockRecordDialog ref="stockRecordDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { Edit, ShoppingCartFull, DeleteFilled, Plus, Memo } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { columns } from './columns';
import { cloneDeep } from 'lodash';
import { delProduct, listProduct } from '../../../api/goods';
import { extraField, columnsValues } from './searchOptions';
import { useDict } from '../../../utils/dict';
import { useGoods } from '../../../hooks/useGoods';
import { ref } from 'vue';
// 基础商品列表
const { goodsList, fetchGoods } = useGoods();

// table
const customTableRef = ref();
// 筛选
const filterTableRef = ref();
// 添加商品
const addGoodsRef = ref();
// 创建套餐
const createPackageRef = ref();
// 补充库存
const stockAdjustDialogRef = ref();
// 库存明细
const stockRecordDialogRef = ref();

const { sys_goods_type: goodsType } = useDict('sys_goods_type');

// 选中项
const selections = ref<any>([]);
const onSelectionChange = (selection: any[]) => {
  selections.value = selection;
};
// 添加商品
const onAddGoods = () => {
  addGoodsRef.value?.show();
};

// 创建套餐
const onCreatePackage = () => {
  fetchGoods();
  createPackageRef.value?.show();
};

// 补充库存
const onStockAdjust = (row: any) => {
  stockAdjustDialogRef.value?.show(row);
};

// 库存明细
const onStockRecord = (row: any) => {
  stockRecordDialogRef.value?.show(row);
};

// 删除
const onDelete = (row: any) => {
  ElMessageBox.confirm(`确定删除商品【${row.productName}】吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    delProduct(row.productId).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success('删除成功');
        customTableRef.value?.refresh();
      }
    });
  });
};

const onEdit = (row: any) => {
  const data = cloneDeep(row);
  // 系统商品
  if (data.externalType == 1 && data.type == 1) {
    return createPackageRef.value?.show(data);
  }
  addGoodsRef.value?.show(data);
};

// 查询条件
const onSubmit = (form: any) => {
  console.log('查询条件:');
  customTableRef.value?.search(form);
};
</script>

<style scoped lang="scss">
.container {
  padding: 16px;

  .productName {
    font-weight: bold;
  }

  .alertFpBtn {
    padding-left: 0;
    padding-right: 0;
  }

  .payCount {
    cursor: pointer;
  }

  .remarkBox {
    .newReamark {
      display: block;
      text-wrap: wrap;
      text-align: left;
      line-height: 18px;
      font-size: 13px;
      margin-bottom: 5px;
    }
  }
}
</style>
